<template>
<div class="home">
  <!-- query写法 -->
  <!-- 编号: {{ query.id }} <br>
  标题: {{ query.title }} <br>
  内容: {{ query.content }} <br> -->

  <!-- params写法 -->
  <!-- 编号: {{ params.id }} <br>
  标题: {{ params.title }} <br>
  内容: {{ params.content }} <br> -->

  <!-- 路由的props写法 -->
  编号: {{ id }} <br>
  标题: {{ title }} <br>
  内容: {{ content }} <br> 
</div>
</template> 

<script setup lang="ts" name="Detail">
import { useRoute } from 'vue-router'
import { toRefs } from 'vue'
let route = useRoute()
console.log(route)

// query写法
// console.log(route.query)
// let { query } = toRefs(route)

// params写法
// console.log(route.params)
// let { params } = toRefs(route)

// props写法
defineProps(['id','title','content'])
// defineProps(['x','y','z'])
</script>
<style>

</style>